<template>
  <div class="page-component__content ">
    <div class="container">
      <div class="banner">
        <h3>欢迎你回来！</h3>
        <p>继续登录账户，更多内容为你呈现。</p>
      </div>
      <div class="content">
        <div class="from mb-3">
          <van-cell-group>
            <van-field v-model="form.phone"
                       placeholder="请输入你的账户"
                       @blur="checkFrom('phone')"
                       @keyup="checkFrom('phone')"
                       :class="{'error-red-border':!!checkToast.phone}"
                       :error-message="checkToast.phone"
                       :error="!!checkToast.phone" />
            <van-field v-model="form.pass"
                       autocomplete="new-password"
                       placeholder="请输入密码"
                       type="password"
                       @blur="checkFrom('pass')"
                       @keyup="checkFrom('pass')"
                       :class="{'error-red-border':!!checkToast.pass}"
                       :error-message="checkToast.pass"
                       :error="!!checkToast.pass" />
            <div class="d-flex justify-content-between align-items-center van-cell login-utils">
              <div>
                <van-checkbox v-model="saveLoginCookie"
                              shape="square">记住账户</van-checkbox>
              </div>
              <router-link to="forgetpassword">忘记密码?</router-link>
            </div>
          </van-cell-group>
        </div>
        <button class="but-button but-theme is-round but-block"
                @click="Check">登录</button>
        <div class="text-center font-s-30 mt-2 color-gray">
          没有账户，现在去 <router-link to="/register">注册</router-link> >>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import login from '@/axios/api/user/login'
import { setLoginCookie, getLoginCookie, removeLoginCookie } from '@/axios/utils'
import { Base64 } from 'js-base64'
import Cookies from 'js-cookie'
export default {
  name: 'Login',
  props: {},

  data () {
    return {
      userName: '',
      password: '',
      saveLoginCookie: false,
      // 表单数据
      form: {
        phone: '', // 手机号
        pass: '' // 密码
      },
      // 提示错误信息
      checkToast: {
        phone: null,
        pass: null
      }
    }
  },
  watch: {
    saveLoginCookie: function (newVal) {
      console.log(newVal)
      if (!newVal) {
        this.removeLoginCookie()
      }
    }
  },
  computed: {},
  methods: {
    setLoginCookie,
    getLoginCookie,
    removeLoginCookie,
    // 提交登录
    submit () {
      let pass = Base64.encode(this.form.pass)
      login({
        phone: this.form.phone,
        pass: pass
      }).then(res => {
        if (res.data) {
          this.$toast({
            message: '登录成功',
            duration: 1000,
            onClose: () => {
              this.$router.push('/home')
            }
          })
          this.$store.commit('save', { path: 'userInfo', data: res.data })
          this.setLoginCookie(JSON.stringify(res.data))
          if (this.saveLoginCookie) {
            // 登录成功进行登录信息赋值
            Cookies.set('phone', this.form.phone)
          } else {
            Cookies.set('phone', '')
          }
        } else {
          this.$toast(res.err.message)
        }
      })
    },
    Check () {
      this.checkFrom('phone')
      this.checkFrom('pass')
      // 验证输入状态 成功之后跳转到获取验证码页面
      // 校验手机号是否存在接口没有 跳过
      let isTrue = true
      let form = this.form
      let checkToast = this.checkToast
      for (let key in form) {
        if (!form[key] || !!checkToast[key]) {
          // 如果数据为空 并且 验证不为空 就属于没通过
          isTrue = false
          return false
        }
      }
      // 验证通过 显示
      if (isTrue) {
        this.submit()
      }
    },
    checkFrom (type) {
      if (type === 'phone') {
        let phone = this.form.phone
        if (!phone) {
          // 校验手机号
          // 校验是否为空
          this.checkToast.phone = '请输入你的账户'
        } else {
          // 如果符合 关闭错误提示
          this.checkToast.phone = null
        }
      } else if (type === 'pass') {
        // 校验密码1
        let pass = this.form.pass
        if (!pass) {
          // 校验是否为空
          this.checkToast.pass = '请输入密码'
        } else {
          // 如果符合 关闭错误提示
          this.checkToast.pass = null
        }
      } else {
        console.log('错误检验类型')
      }
    },
    getLoginState () {
      // let loginData = this.getLoginCookie()
      let phone = Cookies.get('phone')
      // 获取cookie登录信息
      if (phone) {
        this.form.phone = phone
        // this.form.pass = loginData.pass
        this.saveLoginCookie = true
      }
    }
  },
  // 创建实例后
  created () {
    this.getLoginState()
  },
  // 挂载后
  mounted () { }
}
</script>

<style lang="scss" scoped>
// 最外层容器
.page-component__content {
  min-height: calc(100vh - #{$header-h});
  background-color: #fff;
}

.container {
  background-color: #131622;
}
.banner {
  height: px-calc(262);
  background-color: #2e2e2e;
  padding: 20px;
  color: #fff;
  p {
    margin-top: 10px;
  }
}
.content {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: px-calc(84);
}

// 协同UI的表单外容器
.van-cell {
  &.login-utils {
    font-size: px-calc(30);
  }
}

// 公共样式 待整理
.color-gray {
  color: #999999;
}
.title-gray {
  color: #333333;
}
// 组件
//文本框
::v-deep .van-cell {
  font-size: px-calc(34);
  margin-bottom: px-calc(32);
  padding: px-calc(32) 0;
  overflow: visible; // 调整报错信息位置
  .van-cell__value {
    overflow: visible; // 调整报错信息位置
  }
  .van-field__error-message {
    // 调整报错信息位置
    position: absolute;
    bottom: px-calc(-80);
    z-index: 1;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
::v-deep.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: 0;
}
::v-deep.van-cell:not(:last-child) {
  &.error-red-border {
    &::after {
      border-color: red;
    }
  }
  &::after {
    left: 0;
    border-color: #999999;
  }
}
</style>
